<template>
    <div>
        <el-container>
            <el-aside width="200px" style="height:100vh">
                <h5 style="text-align: center">智慧校园管理端</h5>
                <div style="overflow: auto">
                    <el-menu
                        router
                        background-color="transparent"
                        class="el-menu-vertical-demo"
                        :default-active="data.activeIndex"
                    >
                        <sub-menu v-for="menu in data.personMenus" :key="menu.path" :menu="menu"/>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <el-icon class="el-icon-setting" style="margin-right: 15px"/>
                        <el-dropdown-menu>
                            <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
                            <el-dropdown-item command="updatepassword">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>{{ data.userInfo.loginName }}({{ data.userInfo.roleName }})</span>
                </el-header>
                <el-main style="overflow: auto;height: calc(100vh - 60px)">
                    <router-view ref="child"/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {getUserInfo} from "@/utils/auth";
import {onMounted, reactive} from "vue";
import SubMenu from "@/components/menu/SubMenu";

export default {
    components: {SubMenu},
    setup() {
        const data = reactive({
            userInfo: getUserInfo(),
            activeIndex: 1,
            personMenus: [],
        })
        const indexMenus = () => {
            const userInfo = getUserInfo();
            let menus = userInfo.menuVOS
            menus = menus.filter(menu => {
                return !menu.isHidden
            })
            menus = menus.map(menu => {
                if (menu.hasChildren) {
                    menu.children = []
                }
                return menu
            })
            console.log({menus})
            menuFunction(menus)
        }
        const menuFunction = (menus) => {
            menus.forEach(menu => {
                if (menu.parentUuid === '0') {
                    data.personMenus?.push(menu)
                } else {
                    console.log({menu})
                    const parentMenu = menus.find(item => item.uuid === menu.parentUuid)
                    console.log({parentMenu})
                    parentMenu?.children?.push(menu)
                }
            })
        }
        onMounted(() => {
            indexMenus()
        })
        return {
            data,
            indexMenus
        }
    }
    // data() {
    //   return {
    //     userInfo: getUserInfo(),
    //   };
    // },
    // computed: {
    //   activeIndex() {
    //     const {path} = this.$route;
    //     const arr = menus.filter((menu) => path.startsWith(menu.path));
    //     return arr.length ? arr[0].path : "";
    //   },
    //   menus() {
    //     const userInfo = getUserInfo();
    //     const roleCode = userInfo.role.js.code;
    //     return menus.filter((menu) => {
    //       if (menu.auth) {
    //         return menu.auth.includes(roleCode);
    //       }
    //       return true;
    //     });
    //   },
    // },
    // methods: {
    //   handCommand(command) {
    //     if (command === "logout") {
    //       this.logout();
    //     }
    //     if (command === 'userinfo') {
    //       this.toUserInfo();
    //     }
    //     if (command === 'updatepassword') {
    //       this.toUpdatePassword();
    //     }
    //   },
    //   logout() {
    //     removeToken();
    //     removeUserInfo();
    //     Message({
    //       message: "退出成功",
    //       type: "success",
    //       duration: 2 * 1000,
    //     });
    //     // 跳转到登录页面
    //     setTimeout(() => {
    //       this.$router.push("/login");
    //     }, 1000);
    //   },
    //   /**
    //    * 跳转到用户信息页面
    //    */
    //   toUserInfo() {
    //     this.$router.push("/user-info").catch(() => {
    //     });
    //   },
    //   /**
    //    * 跳转到修改密码页面
    //    */
    //   toUpdatePassword() {
    //     this.$router.push("/update-password").catch(() => {
    //     });
    //   }
    // },
};
</script>

<style scoped>
.el-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
}

.el-main {
    background-color: #fefefe;
    color: #333;
    height: auto;
}
</style>
